<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page isELIgnored="false"%>
<jsp:include page="../frame/header.jsp"></jsp:include>

<title>发布租房信息</title>
<style>

#imgDiv div{
	margin-left:8px;
	margin-top:8px;
	position:relative;
}
.del-img{
	position:absolute;
	left:0px;
	top:0px;
	z-index:9999;
	cursor:pointer;
	display:none;
}
.gray {
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: url(desaturate.svg#grayscale);
	filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
	-webkit-filter: grayscale(1);
}
</style>
</head>

<body>
	<div class="container-fluid">
		<div class="row-fluid">
			<div>
				<ul class="breadcrumb">
					<li><a href="#">实用功能</a> <span class="divider">/</span></li>
					<li><a href="#">房屋出租</a></li>
				</ul>
			</div>

			<div class="box">
				<div class="box-header well" data-original-title>
					<h2>
						<i class="icon-edit"></i> 发布租房信息
					</h2>
					<div class="box-icon">
						<a href="#" class="btn btn-setting btn-round"><i
							class="icon-cog"></i></a> <a href="#"
							class="btn btn-minimize btn-round"><i class="icon-chevron-up"></i></a>
						<a href="#" class="btn btn-close btn-round"><i
							class="icon-remove"></i></a>
					</div>
				</div>
				<div class="box-content">
					<form id="myform" class="form-horizontal" method="post" action="<c:url value="/admin/func/rent" />">
						<fieldset>
							<input type="hidden" name="rentId" value="${rent.rentId }">
							<div class="top-pills">
								<div class="tabbable">
									<!-- Only required for left/right tabs -->
									<ul class="nav nav-tabs">
										<li class="active"><a href="#tab1" data-toggle="tab">基本信息</a></li>
										<li><a href="#tab2" data-toggle="tab">详细信息</a></li>
										<li><a href="#tab3" data-toggle="tab">广告设置</a></li>
									</ul>
									<div class="tab-content">
										<div class="tab-pane active" id="tab1">
											<div class="control-group" id="rented">
												<label class="control-label" for="rented">租出啦</label>
												<div class="controls">
													<label class="radio inline"> 
														<input type="radio" name="rented" value="0" <c:if test="${rent.rented == 0 }">checked</c:if>>否
													</label> 
													<label class="radio inline"> 
														<input type="radio" name="rented" value="1" <c:if test="${rent.rented == 1 }">checked</c:if>>是
													</label> 
												</div>
											</div>
											<div class="control-group">
												<label class="control-label" for="rentType"><font color=red>*</font>出租方式</label>
												<div class="controls">
													<label class="radio inline"> 
														<input type="radio" name="rentType" value="1" <c:if test="${rent.rentType == 1 }">checked</c:if>>整租房
													</label> 
													<label class="radio inline"> 
														<input type="radio" name="rentType" value="2" <c:if test="${rent.rentType == 2 }">checked</c:if>>合租房
													</label>
													<label class="radio inline"> 
														<input type="radio" name="rentType" value="3" <c:if test="${rent.rentType == 3 }">checked</c:if>>短租/日租
													</label>
												</div>
											</div>
											<div class="control-group">
												<label class="control-label" for="houseType"><font color=red>*</font>房屋类型</label>
												<div class="controls">
													<label class="radio inline"> 
														<input type="radio" name="houseType" value="1" <c:if test="${rent.houseType == 1 }">checked</c:if>>House
													</label> 
													<label class="radio inline"> 
														<input type="radio" name="houseType" value="2" <c:if test="${rent.houseType == 2 }">checked</c:if>>Apartment
													</label>
													<label class="radio inline"> 
														<input type="radio" name="houseType" value="3" <c:if test="${rent.houseType == 3 }">checked</c:if>>宿舍
													</label>
												</div>
											</div>
											<div class="control-group">
												<label class="control-label" for="status"><font color=red>*</font>选择身份</label>
												<div class="controls">
													<label class="radio inline"> 
														<input type="radio" name="status" value="1" <c:if test="${rent.status == 1 }">checked</c:if>>个人
													</label> 
													<label class="radio inline"> 
														<input type="radio" name="status" value="2" <c:if test="${rent.status == 2 }">checked</c:if>>经纪人
													</label>
												</div>
											</div>
											<div class="control-group">
												<label class="control-label" for="title">邮编</label>
												<div class="controls">
													<input class="input-xlarge focused" name="zipCode"
														id="zipCode" type="text" value="${rent.zipCode }">
												</div>
											</div>
											<div class="control-group">
												<label class="control-label" for="address"><font color=red>*</font>地址 </label>
												<div class="controls">
													<input class="input-xlarge" name="address" id="address" check-type="required" required-message="请输入地址"
														type="text" value="${rent.address }" >
												</div>
											</div>
											<%-- <div class="control-group">
												<label class="control-label" for=""><font color=red>*</font>内部户型 </label>
												<div class="controls">
													<input class="input-mini" name="roomSize" id="roomSize" check-type="number" 
														type="text" value="${rent.roomSize }" > 室 
													<input class="input-mini" name="hallSize" id="hallSize" check-type="number" 
														type="text" value="${rent.hallSize }" > 厅 
													<input class="input-mini" name="bathroomSize" id="bathroomSize" check-type="number" 
														type="text" value="${rent.bathroomSize }" > 卫 
													
												</div>
											</div> --%>
											<div class="control-group">
												<label class="control-label" for=""><font color=red>*</font>内部户型 </label>
												<div class="controls">
													<input class="input-xlarge" name="apartmentLayout" id="apartmentLayout" check-type="required" required-message="请输入内部户型"
														type="text" value="${rent.apartmentLayout }" >
													
												</div>
											</div>
											<div class="control-group" id="rentRoom">
												<label class="control-label" for="rentRoom">卧室类型</label>
												<div class="controls">
													<label class="radio inline"> 
														<input type="radio" name="rentRoom" value="0" <c:if test="${rent.rentRoom == 0 }">checked</c:if>>不限制
													</label> 
													<label class="radio inline"> 
														<input type="radio" name="rentRoom" value="1" <c:if test="${rent.rentRoom == 1 }">checked</c:if>>主卧
													</label> 
													<label class="radio inline"> 
														<input type="radio" name="rentRoom" value="2" <c:if test="${rent.rentRoom == 2 }">checked</c:if>>次卧
													</label>
												</div>
											</div>
											<div class="control-group" id="rentGender">
												<label class="control-label" for="rentGender">性别要求</label>
												<div class="controls">
													<label class="radio inline"> 
														<input type="radio" name="rentGender" value="0" <c:if test="${rent.rentGender == 0 }">checked</c:if>>不限制
													</label> 
													<label class="radio inline"> 
														<input type="radio" name="rentGender" value="1" <c:if test="${rent.rentGender == 1 }">checked</c:if>>男
													</label> 
													<label class="radio inline"> 
														<input type="radio" name="rentGender" value="2" <c:if test="${rent.rentGender == 2 }">checked</c:if>>女
													</label>
												</div>
											</div>
											<div class="control-group">
												<label class="control-label" for="rentPrice">出租面积</label>
												<div class="controls">
													<input class="input-large" id="area" name="area" placeholder="0 表示未知" type="text" check-type="decimal" 
														value="${rent.area }" > ㎡
												</div>
											</div>
											<div class="control-group">
												<label class="control-label" for="rentPrice">租金</label>
												<div class="controls">
													<input class="input-large" placeholder="0 表示面议"  id="rentPrice" name="rentPrice" type="text" check-type="decimal" 
														value="${rent.rentPrice }" > 英镑/月
												</div>
											</div>
											<div class="control-group">
												<label class="control-label" for="rentTime">租期</label>
												<div class="controls">
													<input class="input-small" id="rentTime" name="rentTime" type="text"
														value="${rent.rentTime }" > 
													<select class="input-small" data-placeholder="面议" id="rentTimeType"
														name="rentTimeType" data-rel="chosen">
														<option value="0" <c:if test="${rent.rentTimeType == 0 }">checked</c:if>>面议</option>
														<option value="1" <c:if test="${rent.rentTimeType == 1 }">checked</c:if>>年</option>
														<option value="2" <c:if test="${rent.rentTimeType == 2 }">checked</c:if>>月</option>
														<option value="3" <c:if test="${rent.rentTimeType == 3 }">checked</c:if>>周</option>
														<option value="4" <c:if test="${rent.rentTimeType == 4 }">checked</c:if>>日</option>
													</select>
													
												</div>
											</div>
											<div class="control-group">
												<label class="control-label" for="intTime">入住时间</label>
												<div class="controls">
													<input class="input-xlarge datepicker" 
													id="inTime" name="inTime" type="text">
												</div>
											</div>
											<div class="control-group">
												<label class="control-label" for="outTime">截止时间</label>
												<div class="controls">
													<input class="input-xlarge datepicker" 
													id="outTime" name="outTime" type="text">
												</div>
											</div>
				
											<div class="control-group">
												<label class="control-label" for="title"><font color=red>*</font>标题 </label>
												<div class="controls">
													<input class="input-xxlarge" id="title" name="title" type="text" check-type="required" required-message="请输入标题"
														value="${rent.title }" >
												</div>
											</div>
											
											<div class="control-group">
												<label class="control-label" for="fileInput">上传缩略图</label>
												<div class="controls">
													<input class="input-file uniform_on" name="file"
														id="userHeader1" type="file"> <input type="button"
														value="upload" onclick="return ajaxFileUpload1();">
												</div>
				
											</div>
											<div class="control-group">
												<div class="controls">
													<img id="loading1" class="hide"
														src="<c:url value="/resources/img/ajax-loader-6.gif"/>">
													<img id="picture"
														src='<c:url value="/resources/fileupload/${rent.pic }"/>'
														height="100"> <input type="hidden" name="pic" id="pic"
														value="${rent.pic }">
												</div>
											</div>
											
											<div class="control-group">
												<label class="control-label" for="fileInput">上传图片</label>
												<div class="controls">
													<input class="input-file uniform_on" name="file"
														id="userHeader" type="file"> <input type="button" class="btn btn-success"
														value="upload" onclick="return ajaxFileUpload();">
													<img id="loading" class="hide" src="<c:url value="/resources/img/ajax-loader-6.gif"/>">
												</div>
											</div>
											<div class="control-group">
												<input type="hidden" name="images" id="images" value="${rent.images }">	
												<label class="control-label" for="fileInput">&nbsp;</label>
												<div class="controls" id="imgDiv">
													
												</div>
											</div>
											
											<div class="control-group">
												<label class="control-label" for="linkName"><font color=red>*</font>联系人 </label>
												<div class="controls">
													<input class="input-xlarge" id="linkName" name="linkName" type="text" check-type="required" required-message="请输入联系人"
														value="${rent.linkName }" >
												</div>
											</div>
											<div class="control-group">
												<label class="control-label" for="phone"><font color=red>*</font>联系电话</label>
												<div class="controls">
													<input class="input-xlarge" id="phone" name="phone" type="text" check-type="required" required-message="请输入联系电话"
														value="${rent.phone }" >
												</div>
											</div>
											<div class="control-group">
												<label class="control-label" for="publishValidateDate">有效期至</label>
												<div class="controls">
													<input class="input-xlarge datepicker" placeholder="默认为30天" 
													id="publishValidateDate" name="publishValidateDate" type="text">
												</div>
											</div>
											<div class="control-group">
												<label class="control-label" for="commentBaseCount">评论基数</label>
												<div class="controls">
													<input class="input-xlarge" id="commentBaseCount"
														name="commentBaseCount" type="text"
														value="${rent.commentBaseCount }" check-type="number">
												</div>
											</div>
				
											<input name="commentCount" type="hidden"
												value="${rent.commentCount }"> <input name="praiseCount"
												type="hidden" value="${rent.praiseCount }">
				
											<div class="control-group">
												<label class="control-label" for="praiseBaseCount">点赞基数</label>
												<div class="controls">
													<input class="input-xlarge" id="praiseBaseCount"
														name="praiseBaseCount" type="text"
														value="${rent.praiseBaseCount }" check-type="number">
												</div>
											</div>
										</div>
										
										<div class="tab-pane" id="tab2">
											<div class="control-group">
												<label class="control-label" for="details"><font color=red>*</font>房源描述</label>
												<div class="controls">
													<textarea id="description_mc" name="description_mc" rows="18" check-type="required" required-message="请输入房源信息"
														 style="height:500px;width: 100%">${rent.description_mc }</textarea>
												</div>
											</div>
										</div>
										<div class="tab-pane" id="tab3">
											<div class="control-group" id="type">
												<label class="control-label" for="status">是否启用</label>
												<div class="controls">
													<label class="radio inline"> 
														<input type="radio" name="status" value="1" <c:if test="${rent.advert.status == 1 }">checked</c:if>>是
													</label> 
													<label class="radio inline"> 
														<input type="radio" name="status" value="0" <c:if test="${rent.advert.status == 0 }">checked</c:if>>否
													</label>
												</div>
											</div>
											<div class="control-group" id="type">
												<label class="control-label" for="type">类型</label>
												<div class="controls">
													<label class="radio inline"> 
														<input type="radio" name="type" value="1" <c:if test="${rent.advert.type == 1 }">checked</c:if>>开机广告
													</label> 
													<label class="radio inline"> 
														<input type="radio" name="type" value="2" <c:if test="${rent.advert.type == 2 }">checked</c:if>>首页广告
													</label>
													<label class="radio inline"> 
														<input type="radio" name="type" value="0" <c:if test="${rent.advert.type == 0 }">checked</c:if>>列表页广告
													</label> 
												</div>
											</div>
											<div class="control-group" id="type">
												<label class="control-label" for="adPos">显示位置</label>
												<div class="controls">
													<label class="radio inline"> 
														<input type="radio" name="adPos" value="1" <c:if test="${rent.advert.adPos == 1 }">checked</c:if>>全屏显示
													</label> 
													<label class="radio inline"> 
														<input type="radio" name="adPos" value="0" <c:if test="${rent.advert.adPos == 0 }">checked</c:if>>置顶显示
													</label>
												</div>
											</div>
											<div class="control-group" id="type">
												<label class="control-label" for="adType">广告形式</label>
												<div class="controls">
													<label class="radio inline"> 
														<input type="radio" name="adType" value="0" <c:if test="${rent.advert.adType == 0 }">checked</c:if>>图片
													</label> 
													<label class="radio inline"> 
														<input type="radio" name="adType" value="1" <c:if test="${rent.advert.adType == 1 }">checked</c:if>>动图
													</label>
													<label class="radio inline"> 
														<input type="radio" name="adType" value="2" <c:if test="${rent.advert.adType == 2 }">checked</c:if>>视频
													</label>
												</div>
											</div>
											<div class="control-group">
												<label class="control-label" for="adContent">广告上传</label>
												<div class="controls">
													<input class="input-file uniform_on" name="file"
														id="file_1" type="file"> <input type="button"
														value="upload" onclick="return ajaxFileUpload_1();">
												</div>
												
											</div>
												<div class="control-group">
												<div class="controls">
													<img id="loading_1" class="hide"
													src="<c:url value="/resources/img/ajax-loader-6.gif"/>">
												<div id="picture_1"><img 
													src='<c:url value="/resources/fileupload/${rent.advert.adContent }"/>'
													height="100"></div> <input type="hidden" name="adContent"
													id="adContent" value="${rent.advert.adContent }">
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							
							<div class="form-actions">
								<input type="hidden" name="advertStr" id="advertStr">
								<button id="saveBtn" type="button" class="btn btn-primary">保存</button>
								<button id="cancelBtn" type="button" class="btn">返回</button>
							</div>
						</fieldset>
					</form>

				</div>
			</div>
			<!--/span-->

		</div>
	</div>
	<!--/row-->
</body>

<jsp:include page="../frame/scripts.jsp"></jsp:include>
<script type="text/javascript">

var images = new Array();

$(document).ready(function(){
	$('#cancelBtn').click(function(){
		window.location.href = '<c:url value="/admin/func/rent" />';	
	})
	
	$('.datepicker').datepicker('option', 'dateFormat', 'yy-mm-dd'); 
		
	$( "#publishValidateDate" ).datepicker( "setDate", "${rent.publishValidateDate}" );
	
	$("#rentRoom").hide();
	$("#rentGender").hide();
	$("input[name='rentType']").change(function(){
		var value = $(this).val();
		if(value == 2){
			$("#rentRoom").show();
			$("#rentGender").show();
		}else{
			$("#rentRoom").hide();
			$("#rentGender").hide();
		}
	})
	
	var imgs = "${rent.images}";
	if(imgs && "" != imgs){
		$.each(imgs.split(","),function(i,item){
			setImages(item);
		})
	}
	
	$("#myform").validation();
	
	//保存
	$('#saveBtn').click(function(){
		var value = images.join(",");
		$("input[name='images']").val(value);
		
		var info = new Object();
		info.status = $("input[name=status]:checked").val();
		info.type = $("input[name=type]:checked").val();
		info.adPos = $("input[name=adPos]:checked").val();
		info.adType = $("input[name=adType]:checked").val();
		info.adContent = $("input[name='adContent']").val();
		
		var str = JSON.stringify(info);
		$("#advertStr").val(str);
		
		$("#myform").submit();
	})
	
	//xheditor 文件上传
	$('#description_mc').xheditor({
		tools:'full',
		skin:'default',
		upMultiple:1,
		html5Upload:false,
		upImgUrl:'<c:url value="/xheditor/fileupload"/>',
		upImgExt:'jpg,png,jpeg,gif,bmp',
		onUpload:function(data){
			
		}
	})
	
})

function setImages(item){
	var image = DOMAIN + '/resources/fileupload/'+item;
	var delImg = '<c:url value="/resources/img/del.png"/>';
	var img = '<div style="float:left;height:100px;" onmouseout="hideClose()" onmouseover="showClose(this)"><img class="del-img" onclick="delImg(this,\''+item+'\')" src="'+delImg+'"><img class="pic" src="'+image+'" height="100"></div>';
	$("#imgDiv").append(img).show();
	images.push(item);	
}

//上传缩略图
function ajaxFileUpload1() {

	$("#loading1").ajaxStart(function() {
		//开始上传文件时显示一个图片
		$(this).show();
	}).ajaxComplete(function() {
		//文件上传完成将图片隐藏起来
		$(this).hide();
	});

	$.ajaxFileUpload({
		url : '<c:url value="/fileupload"/>',//用于文件上传的服务器端请求地址
		secureuri : false,//一般设置为false
		fileElementId : 'userHeader1',//文件上传空间的id属性  <input type="file" id="file" name="file" />
		dataType : 'JSON',//返回值类型 一般设置为json(大写)
		success : function(data, status) {
			var image = DOMAIN + '/resources/fileupload/' + $(data).html();
			$("#picture").attr('src', image).show();
			$("input[name='pic']").val($(data).html());
		},
		error : function(data, status, e) {
			alert(e);
		}
	})

	return false;
}

//上传图片
function ajaxFileUpload(){
	
	$("#loading").ajaxStart(function(){
		//开始上传文件时显示一个图片
		$(this).show();
	}).ajaxComplete(function(){
		//文件上传完成将图片隐藏起来
		$(this).hide();
	});
	
	$.ajaxFileUpload({
		url:'<c:url value="/fileupload"/>',//用于文件上传的服务器端请求地址
		secureuri:false,//一般设置为false
		fileElementId:'userHeader',//文件上传空间的id属性  <input type="file" id="file" name="file" />
		dataType: 'JSON',//返回值类型 一般设置为json(大写)
		success: function (data, status){
			setImages($(data).html());
		},
		error: function (data, status, e){
			alert(e);
		}	
	})
	
	return false;
}

function showClose(obj){
	$(".del-img").hide();
	$(".pic").removeClass("gray");
	$(obj).find(".pic").addClass("gray");
	$(obj).find(".del-img").show();
}

function delImg(obj,value){
	$(obj).parent().remove();
	var index = $.inArray(value,images);
	images.splice(index,1);
}

function hideClose(){
	$(".del-img").hide();
	$(".pic").removeClass("gray");
}


function insertUpload(msg){
	console.log(msg);
}

//广告上传
function ajaxFileUpload_1() {
	var file = $("#file_1").val();
	var fileType = file.substring(file.lastIndexOf(".")+1); 
	if(fileType == ''){
		alert('请选择广告！');
		return;
	}
	fileType = fileType.toLowerCase();
	
	var adType = $("input[name=adType]:checked").val();
	
	if(adType == 0){
		$("#picture_1").html("<img width=300>");	
		if(fileType != 'png' && fileType != 'jpg' && fileType != 'bmp'){
			alert('图片类型不正确，系统支持三种图片类型：png,jpg,bmp!');
			return;
		}
	}else if(adType == 1){
		$("#picture_1").html("<img width=300>");	
		if(fileType != 'gif'){
			alert('动图类型不正确，系统仅支持gif动图!');
			return;
		}
	}else if(adType == 2){
		$("#picture_1").html("<vedio width=300>");	
		if(fileType != '3gp' && fileType != 'mp4' && fileType != 'mov'){
			//视频
			alert('视频类型不正确，系统支持三种视频类型：3gp,mp4,mov!');
			return;
		}
	}

	$("#loading_1").ajaxStart(function() {
		//开始上传文件时显示一个图片
		$(this).show();
	}).ajaxComplete(function() {
		//文件上传完成将图片隐藏起来
		$(this).hide();
	});

	$.ajaxFileUpload({
		url : '<c:url value="/fileupload"/>',//用于文件上传的服务器端请求地址
		secureuri : false,//一般设置为false
		fileElementId : 'file_1',//文件上传空间的id属性  <input type="file" id="file" name="file" />
		dataType : 'JSON',//返回值类型 一般设置为json(大写)
		success : function(data, status) {
			var image = DOMAIN + '/resources/fileupload/' + $(data).html();
			$("#picture_1").children(0).attr('src', image).show();
			$("input[name='adContent']").val($(data).html());
		},
		error : function(data, status, e) {
			alert(e);
		}
	})

	return false;
}
</script>